/**
  产生一个唯一的ID标识符
*/
function IceyEngineUI_ID_Create(Text) {
    let sjs = Math.floor(Math.random() * 100);
    let timestamp2 = (new Date()).valueOf();
    return "IceyID" +Text+ (timestamp2 + sjs);
}
/**
  random
  @min is min number
  @max is big number
*/
function IceyEngineUI_Random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}


// Chat 聊天控件类
// 配置信息，高宽距离
// config:{
//     parent:dom
//     userName:名字
//     userImage:头像图片
//     data : 本人头像参数
//     onHeaderImage:function(self){}  点击头像的事件，$api.attr(self, 'data');//获取data参数

// }
// 基础默认样式
// style:{
//   isShowName: bool 是否显示名字名称
//   backgroundImage:字符串 图片地址，可以网络
//   saveListNumber:int 预存多少条
//   meBackColor:自己的气泡颜色
//   meTextColor:自己的字体颜色
// }
// 初始化内容
// message:[
//   {
//     isMe:bool 是否为自己发送 ，如果为false 则为对方发送
//     headerImage : 字符串 图片地址 可以网络 用户头像
//     headerName : 字符串 名字
//     message: 内容 字符串 信息
//     data : 参数 随便用什么
//     messageStyle:{
//       messageBackColor:字符串 气泡颜色 可以# 也可以rgba
//       messageTextColor:字符串 字体颜色 可以# 也可以rgba
//     }
//   }
// ]

class IceyEngine_Chat_Default {
  constructor(config,style,message) {
      this.ID = IceyEngineUI_ID_Create("ChatDefaultMain");
      this.MessageID = IceyEngineUI_ID_Create("ChatDefaultMessageID");
      this.InputID = IceyEngineUI_ID_Create("ChatDefaultInputID");
      this.InputButtonID = IceyEngineUI_ID_Create("ChatDefaultInputButtonID");
      this.config = config;
      this.style = style;
      this.message = message;
      this.Dom = `
      <div class="IceyEngine-ChatDefault" id="${this.ID}">
          <div class="IceyEngine-ChatDefault-Message" id="${this.MessageID}"  style="background-image:url('${style.backgroundImage}');background-position:center;background-size:cover;">


          </div>
          <div class="IceyEngine-ChatDefault-Input">
              <div>
                <div class="IceyEngine-ChatDefault-Input-Main"><input type="text" placeholder="请输入信息" id="${this.InputID}"/></div>
              </div>
              <div id="${this.InputButtonID}">发送</div>
          </div>
      </div>
      `;
      $api.append(this.config.parent, this.Dom);

      let InputDom = $api.byId(this.InputID);
      let messageDom = $api.byId(this.MessageID);
      let InputButtonDom = $api.byId(this.InputButtonID);
      for(let i = 0 ; i < message.length;i++){
          let MessageTemp = message[i];
          if(MessageTemp.isMe){
              let meDom = `
                <div class="IceyEngine-ChatDefault-Message-Main IceyEngine-ChatDefault-MessageMe">
                    <div class="IceyEngine-ChatDefault-MessageMe-left" style="background-color:${MessageTemp.messageStyle.messageBackColor};color:${MessageTemp.messageStyle.messageTextColor};">
                        ${MessageTemp.message}
                    </div>
                    <div class="IceyEngine-ChatDefault-MessageMe-center" style="background-color:${MessageTemp.messageStyle.messageBackColor};"></div>
                    <div class="IceyEngine-ChatDefault-MessageMe-right">
                      <div style="opacity:${style.isShowName?1:0};">${MessageTemp.headerName}</div>
                      <div  onclick="onHeaderImage(this)" data="${MessageTemp.data}"  style="background-image:url('${MessageTemp.headerImage}')"></div>
                    </div>
                </div>
              `;
              $api.append(messageDom, meDom);
              // console.log(meDom);
          }else{
            let meDom = `
            <div class="IceyEngine-ChatDefault-Message-Main IceyEngine-ChatDefault-MessageOther">
                <div class="IceyEngine-ChatDefault-MessageOther-left">
                    <div  style="opacity:${style.isShowName?1:0};">${MessageTemp.headerName}</div>
                    <div  onclick="onHeaderImage(this)"  data="${MessageTemp.data}"  style="background-image:url('${MessageTemp.headerImage}')"></div>
                </div>
                <div class="IceyEngine-ChatDefault-MessageOther-center"  style="background-color:${MessageTemp.messageStyle.messageBackColor};"></div>
                <div class="IceyEngine-ChatDefault-MessageOther-right" style="background-color:${MessageTemp.messageStyle.messageBackColor};color:${MessageTemp.messageStyle.messageTextColor};">
                    ${MessageTemp.message}
                </div>
            </div>
            `;
            $api.append(messageDom, meDom);
          }
          messageDom.scrollTop = messageDom.scrollHeight - messageDom.offsetHeight;
      }
      $api.addEvt(InputButtonDom, 'click', function() {
          let InputText  = $api.val(InputDom);
          if(InputText != ""){
            $api.append(messageDom, `
              <div class="IceyEngine-ChatDefault-Message-Main IceyEngine-ChatDefault-MessageMe">
                   <div class="IceyEngine-ChatDefault-MessageMe-left" style="background-color:${style.meBackColor};color:${style.meTextColor};">
                       ${InputText}
                   </div>
                   <div class="IceyEngine-ChatDefault-MessageMe-center"  style="background-color:${style.meBackColor};"></div>
                   <div class="IceyEngine-ChatDefault-MessageMe-right">
                       <div style="opacity:${style.isShowName?1:0};">${config.userName}</div>
                       <div  onclick="onHeaderImage(this)"  data="${config.data}"  style="background-image:url('${config.userImage}')"></div>
                   </div>
               </div>
              `);
            $api.val(InputDom, '');

          }
          let MessageMeNumber = $api.domAll(".IceyEngine-ChatDefault-MessageMe");
          if(MessageMeNumber.length > style.saveListNumber){
              $api.remove(MessageMeNumber[0]);
          }
          messageDom.scrollTop = messageDom.scrollHeight - messageDom.offsetHeight;
      });
      onHeaderImage = config.onHeaderImage;
  }
  // {
  //     headerImage: "http://img4.imgtn.bdimg.com/it/u=16550438,2220103346&fm=27&gp=0.jpg",
  //     headerName: "这是我",
  //     message: "信息内容",
  //     data: 参数
  //     messageStyle: {
  //         messageBackColor: "#87ce42",
  //         messageTextColor: "#fff",
  //     },
  // }
  AddMeMessage(list){
    let messageDom = $api.byId(this.MessageID);
    let meDom = `
    <div class="IceyEngine-ChatDefault-Message-Main IceyEngine-ChatDefault-MessageMe">
        <div class="IceyEngine-ChatDefault-MessageMe-left" style="background-color:${list.messageStyle.messageBackColor};color:${list.messageStyle.messageTextColor};">
            ${list.message}
        </div>
        <div class="IceyEngine-ChatDefault-MessageMe-center" style="background-color:${list.messageStyle.messageBackColor};"></div>
        <div class="IceyEngine-ChatDefault-MessageMe-right">
          <div style="opacity:${this.style.isShowName?1:0};">${list.headerName}</div>
          <div onclick="onHeaderImage(this)" data="${list.data}" style="background-image:url('${list.headerImage}')"></div>
        </div>
    </div>
    `;
    $api.append(messageDom, meDom);
  }
  AddOtherMessage(list){
    let messageDom = $api.byId(this.MessageID);
    let meDom = `
    <div class="IceyEngine-ChatDefault-Message-Main IceyEngine-ChatDefault-MessageOther">
        <div class="IceyEngine-ChatDefault-MessageOther-left">
            <div  style="opacity:${this.style.isShowName?1:0};">${list.headerName}</div>
            <div  onclick="onHeaderImage(this)" data="${list.data}"  style="background-image:url('${list.headerImage}')"></div>
        </div>
        <div class="IceyEngine-ChatDefault-MessageOther-center"  style="background-color:${list.messageStyle.messageBackColor};"></div>
        <div class="IceyEngine-ChatDefault-MessageOther-right" style="background-color:${list.messageStyle.messageBackColor};color:${list.messageStyle.messageTextColor};">
            ${list.message}
        </div>
    </div>
    `;
    $api.append(messageDom, meDom);
  }

}
function onHeaderImage(self) {}
